<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/_header :: header">
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">
            <aside class="lyear-layout-sidebar" th:include="common/_aside :: aside">
            </aside>
        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header" th:include="common/_top :: top">
        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <!-- 省 -->
                            <select class="col-lg-4" id="provice_select" name="province" size="1" onchange="provinceSelectChange()">
                                <option class="pro_sel" th:each="province:${provinceList}" th:value="${province.id}" th:text="${province.name}" th:selected="${provinceSelected == province.id}"></option>
                            </select>
                            <!-- 市 -->
                            <select class="col-lg-4" id="city_select" name="city" size="1" onchange="citySelectChange()">
                                <option th:each="city:${cityList}" th:value="${city.id}" th:text="${city.name}" th:selected="${citySelected == city.id}"></option>
                            </select>
                            <!-- 县区 -->
                            <select class="col-lg-4" id="country_select" name="country" size="1" onchange="countrySelectChange()">
                                <option th:each="country:${countryList}" th:value="${country.id}" th:text="${country.name}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<div th:replace="common/_js :: js">

</div>
<script type="text/javascript">
    $(function () {
        $('.search-bar .dropdown-menu a').click(function () {
            let field = $(this).data('field') || '';
            $('#search-field').val(field);
            $('#search-btn').html($(this).text() + ' <span class="caret"></span>');
        });
    });

    function provinceSelectChange() {
        //获取被选中的option标签
        let provinceId = $('#provice_select  option:selected').val();
        console.info(provinceId)
        window.location.href = "openProvinceCityCountry?provinceId=" + provinceId;
    }

    function citySelectChange() {
        //获取被选中的option标签
        let cityId = $('#city_select  option:selected').val();
        console.info(cityId)
        let pid = $('#provice_select option:selected').val();
        window.location.href = "openProvinceCityCountry?provinceId="+pid+"&cityId=" + cityId;
    }

    function countrySelectChange() {
        //获取被选中的option标签
        let province = $('#provice_select  option:selected').text();
        let city = $('#city_select  option:selected').text();
        let countryId = $('#country_select  option:selected').val();
        let country = $('#country_select  option:selected').text();
        alert(province+" "+city+" "+countryId + " "+country);
    }

</script>
</body>
</html>